/**
 * 简单轮播组件
 * options:
 *		parent : jq('.j-show'),
 *		btns : jq('.j-btn'), // 可以不用
 *      delayDraution : 5000,
 * 		data : [
 *			{'link':'', 'pic':''}
 *		],
 *		fn : function(lastIndex, posIndex){  // 显示每个时回调
 *	
 *		}
 *
 *	functions:
 *  	slideNext
 *  	slidePrev
 */
(function (jq, g){

	function SelectShow(){
		return this.init.apply(this, arguments);
	}

	var sPro = SelectShow.prototype;

	SelectShow.setting = {
		data : [],
		delayDraution : 5000,
		fn : null
	}

	sPro.init = function(options){
		this.setting = jq.extend(SelectShow.setting, options);

		this.parent = jq(this.setting.parent);
		this.parent.append('<div class="pics f-pr"></div>');
		this.container = this.parent.find('.pics');
		this.btns = jq(this.setting.btns);

		this.imageNotLoadList = [];
		this.hasLoadImageCount = 0;

		this.posIndex = -1;
		this.slideLength = this.setting.data.length;
		this.slideInterval = null;

		this.loadImageList();
	};

	sPro.initImgItems = function(){
		var self = this;

		jq.each(this.setting.data, function(index, item){
			var imgNode = jq('\
				<div class="item j-item">\
					<a href="'+ item.link +'" target="_blank">\
						<div class="pic"></div>\
					</a>\
				</div>');

			imgNode.find('.pic').css('background-image', 'url('+ item.pic +')');
			self.container.append(imgNode);
		})

 		this.imgItems = self.container.find('.j-item');

	}

	sPro.initEvent = function(){
		if(this.btns){
			var self = this;

			jq.each(this.btns, function(index, item){
				jq(item).on('mouseenter', function(evt){
					self.onSelectItem(index);
				}).on('mouseleave', function(evt){
					self.outSlideBtns();
				});
			});
		}
	}

	sPro.showLoading = function(){
		this.container.append('<div class="loading"><span>加载中...</span></div>');
	}

	sPro.hideLoading = function(){
		this.container.find('.loading').remove();
	}

	// 加载所有图片
	sPro.loadImageList = function(){
		var self = this;

		// 显示loading
		this.showLoading();

		jq.each(this.setting.data, function(index, item){
			// 为空不加载
			if (jq.trim(item.pic) != '') {
				self.imageNotLoadList.push(item.pic);
			}
		})

		for (var i = 0; i < this.imageNotLoadList.length; i++) {
			this.loadImage(this.imageNotLoadList[i]);
		};
	}

	// 所有图片加载完成
	sPro.loadComplete = function(){
		this.initImgItems();
		this.initEvent();

		this.showSlide(0);
		this.autoSlide();

		this.hideLoading();
	}

	// 加载一个图片
	sPro.loadImage = function(url){
		var self = this;

		$('<img />').bind('load', function(){
			self.hasLoadImageCount++;

			if (self.hasLoadImageCount == self.imageNotLoadList.length) {
				self.loadComplete();
			};

		}).attr('src', url);
	}

	sPro.showSlide = function(index){
		if(this.posIndex == index) {
			return;
		};
					
		var lastIndex = this.posIndex;

		// 恢复上一个，强制恢复清晰度
		if (lastIndex >= 0) {
			this.imgItems.eq(lastIndex).stop().css({'z-index': '3', 'opacity':'1'});
			this.btns && this.btns.eq(lastIndex).removeClass('cur');
		}

		this.posIndex = index;

		this.imgItems.eq(this.posIndex).stop().css({'z-index':'2', 'opacity':'1', 'display':'block'});
		this.btns && this.btns.eq(this.posIndex).addClass('cur');

		if (lastIndex >= 0) {
			var self = this;

			this.imgItems.eq(lastIndex).stop().fadeTo(400, 0, function(){
				self.imgItems.eq(lastIndex).hide().css('z-index', '1');
			});
		}

		this.setting.fn && this.setting.fn(lastIndex, this.posIndex);
	}

	sPro.onSelectItem = function(index){		
		if (!!this.slideInterval) {
			clearInterval(this.slideInterval);
		};

		this.showSlide(Number(index));
	}

	sPro.slideNext = function(){
		var next = this.posIndex + 1

		next = next > this.slideLength - 1 ? 0 : next;

		this.showSlide(next);
	}

	sPro.slidePrev = function(){
		var prev = this.posIndex - 1

		prev = prev < 0 ? this.slideLength - 1  : prev;

		this.showSlide(prev);
	}

	sPro.autoSlide = function(){
		if (!!this.slideInterval) {
			clearInterval(this.slideInterval);
		};

		var self = this;

		this.slideInterval = setInterval(function(){
			self.slideNext();
		}, this.setting.delayDraution);

	}

	sPro.outSlideBtns = function(evt){
		this.autoSlide();
	}

	jq.selectShow = function(options){
		return new SelectShow(options);
	}

})(jQuery, window);
